<script setup>
import { reactive, ref } from 'vue'
import { useHouseAllList } from '../../../hooks/house/index.js';
import { editparkingApi, addparkingApi, getparkingInfoApi } from '../../../api/parking.js'
import { ElMessage } from 'element-plus'
const houseList = useHouseAllList()
const emit = defineEmits(['updateList'])
// let isShow = ref(false)
// 表单数据
const defaultState = reactive({
  community_code: "",
  remark: "",
  house: '',
  lift: '',
  name: "",
  id: null
})
const formData = reactive({ ...defaultState })
// 表达校验
const formRules = {
  community_code: [{ required: true, message: "请选择小区", trigger: "change" }],
  name: [{ required: true, message: "请输入栋数名称", trigger: "blur" }],
  remark: [{ required: true, message: "请输入描述", trigger: "blur" }],
}
// 表单ref引用
const formRef = ref()
// 弹窗控制变量
let isShow = ref(false);
// 关闭事件
const closeHandler = () => {
  // 移除校验
  formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData, { ...defaultState })
};
// 表单提交
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value.validate()
    // 整理数据
    // 提交数据
    const data = toRaw(formData)
    formData.id ? await editparkingApi(data) : await addparkingApi(data)
    // 提示成功
    ElMessage.success('操作成功')
    // 关闭
    isShow.value = false
    // 列表更新
    emit('updateList')
  } catch (error) {
    console.log(error);
  }
}
//  回显数据
const replyData = async (id) => {
  let res = await getparkingInfoApi(id)
  // console.log(res);
  Object.assign(formData, res.data)
  isShow.value = true
}
// 标题
const title = computed(() => {
  return formData.id ? '修改车位信息' : '新增车位信息'
})
// =================================================================
defineExpose({
  isShow, replyData
})
</script>
<template>
  <el-button class="button" type="primary" style="margin-left: 16px" @click="isShow = true">
    新增车位
  </el-button>
  <el-form :model="formData" ref="formRef" :rules="formRules" label-width="80px" :inline="false">
    <el-drawer v-model="isShow" :title="title" :with-header="true" size="50%" @close="closeHandler">
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="所属小区" prop="community_code">
            <el-select v-model="formData.community_code" placeholder="请选择" class="select">
              <el-option v-for="item in houseList" :label="item.name" :value="item.code" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车位名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="描述" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-drawer>
  </el-form>
</template>
<style lang="scss" scoped>
.button {
  float: right;
  margin-right: 100px;
  margin-bottom: 20px;
}

.select {
  width: 100%;
}
</style>